<template>
    <div>
        <!--        全屏模式-->
        <div class="w-full h-full ">
            <!--            头部区域-->
            <div
                class="flex flex-wrap pt-10 bg-gray-900 text-yellow-300 pb-10 items-center  glow md:flex-row-reverse mt-10 mb-10">
                <p class="flex w-full justify-center items-center text-3xl text-gray-200 ">
                    文章后台管理系统
                </p>
                <div class="w-full md:w-1/2 lg:w-5/12 ml-auto md:mr-auto">
                    <img
                        alt="Web development services"
                        class="animate-pulse w-full mx-auto mb-12 md:float-right max-w-xs lg:max-w-sm"
                        src="/static/images/application.svg"></div>
                <div class="w-full md:w-1/2 text-center"><h2
                    class="font-semibold uppercase text-1xl lg:text-2xl text-center pb-5">系统简介<span
                    class="mx-auto w-24 h-1 block mt-1 border-b-2 border-yellow-500"></span></h2>
                    <p class="w-full md:px-3 lg:px-0 mx-auto mb-5">
                        企业官网后台管理系统，含文章模型（自行定义字段），分类管理（无限极分类，呈现结构多种可选），文章管理，满足绝大多数企业官网需求，
                        模板可二次开发

                    </p>
                    <span
                        class="relative text-black text-xs bg-white py-3 px-4 rounded-full font-semibold uppercase rise hover:text-black inline-block"
                    >
                        <canvas height="0"
                                style="border-radius:inherit;height:100%;left:0;position:absolute;top:0;width:100%"
                                width="0"></canvas>
                    感谢使用
                    </span>
                    <span
                        class="relative text-black text-xs bg-white py-3 px-4 rounded-full font-semibold uppercase rise hover:text-black inline-block"
                    >{{ nowDate }}

                    </span>

                </div>
                <p class="text-sm my-6 ">
                    <span>
                        本站由后台laravel8框架+mysql5.6数据库+阿里云短信服务集成完成。<br/>
                        后台管理:采用单页面应用vue2+elementUI。<br/>
                        前台页面:由laravel8集成blade模板编写，扩展集成captcha验证码管理，easy-sms短信服务包。<br/>
                        主要扩展包:tailwindcss，wangeditor、dayjs、axios等。
                    </span>
                </p>
            </div>

        </div>

        <div>
        </div>

    </div>
</template>

<script>

export default {
    route: {path: '/', meta: {title: '数据中心'}},
    data() {
        return {
            nowDate: '',
        }
    },
    mounted() {
        this.currentTime();
        // 模拟请求耗时2s
    },
    methods: {
        currentTime() {
            setInterval(this.formatDate, 500);
        },
        formatDate() {
            let date = new Date();
            let year = date.getFullYear(); // 年
            let month = date.getMonth() + 1; // 月
            let day = date.getDate(); // 日
            let week = date.getDay(); // 星期
            let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            let hour = date.getHours(); // 时
            hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
            let minute = date.getMinutes(); // 分
            minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
            let second = date.getSeconds(); // 秒
            second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
            this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
        }
    },
// 销毁时清除计时器
    // 销毁定时器
    beforeDestroy() {
        if (this.formatDate) {
            clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
        }
    }

}
</script>

<style lang="scss">
.dv-full-screen {
    background-color: #000;
    color: white;
}
</style>
